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Cuaderno  2:  Códigos  de  programación 


¿Qué  es  un  código  de  programación? 

Un  código  de  programación  es  un  lenguaje  que  permite  transmitir  y  recibir 
información  a  las  computadoras.  A  través  de  los  lenguajes  de  programación  pode¬ 
mos  interactuar  con  una  página  web.  El  código  de  programación  puede  ser  binario 
(compuesto  solo  por  ceros  y  unos)  o  código  fuente,  que  es  interpretable  por  los 
seres  humanos. 

Al  igual  que  con  los  lenguajes  humanos,  esta  comunicación  se  realiza  mediante  un 
vocabulario  y  una  gramática  ya  establecidos. 

La  programación,  cualquiera  sea  el  código  específico  que  utilicemos,  se  rige 
por  reglas  y  normas  similares  a  las  de  las  lenguas  naturales,  pero  con  menor 
ambigüedad.  Generalmente,  los  lenguajes  de  programación  cuentan  con  re¬ 
glas  semánticas  y  sintácticas  propias;  es  por  eso  que  usualmente  se  dice 
que  aprender  un  lenguaje  de  programación  es  casi  como  aprender  una  nueva 
lengua. 

En  este  cuaderno  vamos  a  analizar  las  características  de  diferentes  lenguajes  de 
programación,  y  algunos  criterios  que  permitirán  seleccionar  cuál  es  el  más  con¬ 
veniente  para  la  página  web  que  deseamos  desarrollar. 


HTML 

HTML  es  la  sigla  en  inglés  de  Hypertext  Markup  Language  o  lenguaje  de  marcado 
hipertextual,  y  es  el  código  creado  primariamente  para  el  desarrollo  de  páginas 
web.  En  líneas  generales,  este  código  permite  describir  la  estructura  de  un  sitio 
en  internet,  dar  formato  al  contenido,  insertar  imágenes  y  generar  vínculos  con 
otras  páginas. 


Características  estructurales  del  código  HTML:  marcado  estructural 

El  código  HTML  se  compone  de  etiquetas  que  se  indican  entre  corchetes  angu¬ 
iares  <  >.  Las  etiquetas  funcionan  como  categorías  u  órdenes  que  definen  cómo 
se  organizará  y  qué  características  tendrá  la  información  de  nuestra  página  web. 
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Una  premisa  fundamental  del  código  de  programación  HTML  es  que 
cada  etiqueta  que  se  abre  debe  cerrarse.  Por  lo  tanto,  cuando  se 
abre  una  etiqueta:  <  etiqueta  >;  se  cierra  una  etiqueta  que  tiene 
la  misma  estructura  pero  agrega  una  barra:  <  /etiqueta  > 


Para  comprender  el  código  HTML  es  preciso  pensar  en  términos  estructurales 
una  página  web.  El  nivel  superior  de  esa  estructura  será  la  delimitación  de  todo  el 
documento  con  la  etiqueta  de  inicio  y  cierre  que  indica  qué  código  estamos  usan¬ 
do:  <html>  y  </html>.  En  síntesis,  toda  página  web  comenzará  con  la  etiqueta 
<html>,  y  deberá  finalizar  con  la  etiqueta  </html>. 

El  siguiente  nivel  de  la  estructura  es  el  encabezado,  donde  se  coloca  por  ejem¬ 
plo  el  título  de  la  página  web,  y  responde  a  la  etiqueta  <head>,  que  deberá 
cerrarse  con  la  etiqueta  </head>.  Y  por  último,  en  este  orden  estructural  se 
encuentra  el  cuerpo  de  nuestra  página  web,  que  será  donde  figure  todo  el  con¬ 
tenido  de  la  página,  y  que  responde  a  las  etiquetas  de  inicio  y  cierre  <body>  y 
</body>. 


i 


Para  saber  algo  más... 

Haciendo  clic  derecho  sobre  cualquier  página  web  y  seleccionan¬ 
do  la  opción  ver  código  fuente,  se  puede  ver  la  programación 
HTML  de  esa  página.  Les  recomendamos  que  hagan  el  ejercicio 
de  encontrar  cada  parte  de  las  aquí  descriptas  en  el  código  fuente 
de  una  página.  Pueden  elegir  una  página  sencilla  para  encontrar 
fácilmente  todas  sus  partes  estructurales. 


Elementos  del  código  HTML 

Para  dar  formato  al  contenido  y  crear  hipervínculos  en  el  cuerpo  de  la  página 
(enmarcado  entre  las  etiquetas  <body>  y  </body>)  también  se  utilizan  etiquetas 
que  indican  a  los  navegadores  web  cómo  debe  visualizarse  la  página.  Las  etique¬ 
tas  de  marcado  de  presentación  más  comunes  son: 

■  <b>:  texto  en  negrita 

■  <i>:  texto  en  cursiva 

■  <u>:  texto  subrayado 

■  <imagen>:  insertar  una  imagen 

Si  el  cuerpo  de  nuestra  página  web  tiene  el  siguiente  texto:  Informe  especial 
sobre  educación  y  tecnologías  de  la  información  y  la  comunicación ,  y  quere¬ 
mos  destacarlo  usando  negrita,  la  línea  de  código  quedaría  de  la  siguiente 
manera: 


ü - ^ ^ - T 
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<b>Informe  especial  sobre  educación  y  tecnologías  de  la  informa¬ 
ción  y  la  comunicación</b> 

En  nuestra  página  web  se  vería  del  siguiente  modo: 
Informe  especial  sobre  educación  y  tecnologías  de  la  infor¬ 
mación  y  la  comunicación 


La  etiqueta  para  incluir  hipervínculos  requiere  de  dos  componentes:  una  etiqueta 
que  se  denomina  ancla  <a>,  junto  con  un  atributo  href  que  indicará  la  dirección 
web  a  la  que  vincula  el  enlace,  y  la  palabra  que  funcionará  como  vínculo. 


Si  el  enlace  que  queremos  poner  en  nuestra  página  es  a  Wikipedia, 
la  línea  de  código  sería: 

<a  href  ="es. wikipedia. org"> Wikipedia </a> 

En  nuestra  página  web  se  vería  del  siguiente  modo: 

Wikipedia 


css 

El  código  HTML  permite  dar  formato  al  contenido  de  una  página  web,  pero  tiene 
también  muchas  limitaciones.  Con  el  desarrollo  y  la  expansión  de  internet  comen¬ 
zaron  a  requerirse  tecnologías  que  permitieran  ver  el  contenido  de  una  página  web 
en  distintos  dispositivos,  desde  un  monitor  de  PC  -Personal  Computer  o  computa¬ 
dora  personal-  hasta  un  teléfono  celular. 

El  código  CSS  -Cascading  Style  Sheets  u  hoja  de  estilo  en  cascada-  se  basa  en 
reglas  que  determinan  el  estilo  de  uno  o  más  elementos  de  una  página  web.  Este 
código  podrá  ser  escrito  dentro  de  la  página  web  o  en  un  archivo  independiente 
agregando  la  referencia  al  mismo  dentro  de  la  página  web. 

Utilizar  hoja  de  estilo  CSS  (u  otras  confeccionadas  con  lenguajes  similares)  den¬ 
tro  de  los  HTML  tiene  grandes  ventajas,  entre  ellas: 

■  Separar  el  contenido  que  se  encuentra  dentro  de  la  estructura  que  le  brinda  el 
HTML  del  formato  que  se  encuentra  definido  en  la  hoja  de  estilo  CSS. 

■  Mayor  control  sobre  el  diseño  de  una  página  web. 

■  Agilizar  las  actualizaciones. 

■  Permitir  que  los  usuarios  personalicen  el  diseño  de  las  páginas  (aumento  del 
tamaño  tipográfico,  cambio  de  fondos  y  paleta  de  colores,  etc.). 

■  Disminuir  el  tamaño  y  peso  del  HTML  de  la  página. 
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El  espíritu  detrás  del  desarrollo  de  CSS  es  diferenciar  y  separar 
la  estructura  de  una  página  web  de  su  presentación  o  diseño. 


La  creación  de  esta  tecnología  permitió  grandes  avances,  entre  ellos  la  evolución 
de  lo  que  hoy  conocemos  como  Web  2.0.  Así,  la  posibilidad  de  crear  diferentes 
hojas  de  estilo  para  un  mismo  contenido  permite  acceder  a  páginas  por  medio  de 
dispositivos  móviles,  o  que  las  páginas  sean  leídas  por  dispositivos  de  voz. 

Las  declaraciones  en  CSS,se  agregan  a  un  código  HTML  a  través  de  una  etiqueta 
<style>.  Dichas  declaraciones  se  separan  por  punto  y  coma  (;).  El  siguiente  es  un 
ejemplo  de  línea  de  código  en  CSS: 


Con  la  sintaxis: 

<p  style="color:green;font-weight:bold">Informe  especial  sobre 
educación  y  tecnologías  de  la  información  y  la  comunicación</p> 

En  la  página  web  se  vería: 

Informe  especial  sobre  educación  y  tecnologías  de  la  infor¬ 
mación  y  la  comunicación 


PHP 

En  sus  inicios,  el  código  PHP  se  creó  para  facilitar  el  desarrollo  de  páginas  web  per¬ 
sonales,  de  ahí  su  nombre  inicial  Personal  Home  Page.  Sin  embargo,  a  partir  de  los 
avances  y  la  evolución  del  mismo,  actualmente  la  sigla  PHP  se  defíne  como  pre  pro¬ 
cesador  de  hipertextos  {Hypertext  Preprocesor).  El  código  PHP  es  un  lenguaje  gra¬ 
tuito  con  licencia  GNU  GPL  y  compatible  con  cualquier  plataforma  (Windows,  Unix). 

PHP  es  un  lenguaje  del  lado  del  servidor,  es  decir  que  es  un  lenguaje  que  se 
ejecuta  en  el  servidor  web  y  no  en  la  computadora  del  usuario  de  la  página. 
Este  tipo  de  código  permite  que  el  usuario  acceda  a  través  de  una  página  web  a 
bases  de  datos,  conexiones  de  red,  etc.,  recibiendo  en  su  computadora  solo  una 
página  con  el  código  HTML,  que  es  resultado  de  los  procesos  del  PHP  que  se  rea¬ 
lizaron  en  el  servidor.  Veamos  un  diagrama  que  explica  este  proceso: 
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El  principal  beneficio  de  una  página  programada  con  PHP  es  que  podemos  utilizar 
recursos  tales  como  bases  de  datos  manteniendo  una  velocidad  de  ejecución 
óptima,  y  no  requiere  recursos  especiales  al  sistema  operativo  del  usuario. 


ASP 

El  código  ASP  -Active  Server  Pages-  es,  al  igual  que  el  PHP,  un  lenguaje  del  lado 
del  servidor  que  permite  hacer  páginas  dinámicas  con  accesos  a  bases  de  datos, 
conexiones  de  red,  envío  de  mails,  etc.  Este  tipo  de  tecnologías  tiene  como  ventaja 
la  seguridad  que  le  dan  al  programador:  es  él  quien  tiene  acceso  al  código,  ya  que 
el  mismo  se  encuentra  solo  en  los  servidores. 

El  ASP  es  el  lenguaje  estándar  que  creó  Microsoft  para  su  servidor  web,  por  lo  tan¬ 
to  solo  funciona  en  plataformas  de  esa  firma  (Windows). 

Para  desarrollar  páginas  web  con  ASP  se  necesita  contar  con  un  servidor  con  Windows  NT 
4.x  o  mayor  y  el  Internet  Information  Server  (IIS),  que  es  el  servidor  web  de  Microsoft. 


JavaScript:  dinamismo  y  programas  dentro  de  HTML 

JavaScript  es  un  lenguaje  de  programación  del  lado  del  cliente,  dado  que  no  se 
ejecuta  en  el  servidor  sino  que  es  el  propio  navegador  del  usuario  el  que  lo  pro¬ 
cesa.  Es  importante  tener  en  cuenta  que  no  es  posible  desarrollar  un  programa  en 
JavaScript  que  se  ejecute  fuera  de  un  navegador. 

Este  tipo  de  código  es  compatible  con  todos  los  navegadores  modernos  (Firefox, 
Explorer,  Chrome)  y  está  muy  extendido  en  las  actuales  páginas  web  para  validar 
usuarios,  crear  cookies,  detectar  navegadores,  etcétera. 

La  tecnología  de  JavaScript  permite  crear  contenidos  dinámicos  en  páginas  web, 
por  ejemplo  elementos  con  movimiento  o  que  cambien  de  color.  También  permite 
desarrollar  páginas  interactivas  con  programas  propios  como  calculadoras,  formu¬ 
larios,  agendas,  tablas  de  cálculo,  etcétera. 

JavaScript  surge  como  un  modo  de  ampliar  las  capacidades  del  código  HTML,  por  lo 
que  el  código  desarrollado  en  este  lenguaje  se  puede  embeber  en  un  HTML  o  bien 
puede  ser  guardado  en  un  archivo  externo  al  HTML  con  extensión  .js,  que  es  la  ex¬ 
tensión  propia  de  los  archivos  en  JavaScript,  agregando  tan  solo  la  referencia 
a  la  ubicación  del  mismo. 

Una  línea  de  código  que  llamaría  a  un  archivo  de  JavaScript  sería: 


i 


<head> 

<scrípt  src=  "ArchivoJavaScrípt.js"  type=  "text/javascript">  </scrípt> 
</head> 
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